 <div id="login" class="login_wrapper">
     <div class="animate form login_form">
       <section class="login_content">
         <form action="javascript:void (0)">
           <h1>Login</h1>
           <div>
             <input type="text" class="form-control" placeholder="请输入账号" required=""
                     v-model:values="user.userName"/>
           </div>

           <div>
             <input type="password" class="form-control" placeholder="请输入密码" required=""
                    v-model:values="user.password"/>
           </div>

           <div>
		    <input class="form-control input-val" type="text"
            v-model:values="inputCheck"
			placeholder="请输入验证码"  title="请输入验证码(不区分大小写)"
			style="float:left; width:65%; margin-bottom: 0px;" />

		    <canvas id="canvas" width="100" height="36" @click="draw(checkNum)"></canvas>
           </div>

	
            <div style="text-align:left; margin-top: 5px; margin-left: 3px;">
                <input type="checkbox" value="rememberMe" lay-filter="filter"
                       v-model:value="user.rememberMe"
                       style="float: left;" lay-skin="primary" title="30天内自动登录" >30天内自动登录
            </div>
           
           <div>
             <a class="btn btn-default submit" href="javascript:void(0)" @click="login()">Login</a>
             <a class="reset_pass" href="#">Lost your password?</a>
           </div>

           <div class="clearfix"></div>

           <div class="separator">
             <p class="change_link">New to site?
               <a href="/register" class="to_register"> Create Account </a>
             </p>

             <div class="clearfix"></div>
             <br />

             <div>
               <h1><i class="fa fa-paw"></i> Spring Boot System</h1>
               <p>©2021 All Rights Reserved.  Spring Boot System! use Bootstrap 3 template. Privacy and Terms</p>
             </div>
           </div>
         </form>
       </section>
     </div>
</div>
 <script type="text/javascript">
    var vueLogin =new Vue({
       el:"#login",
       data:{
           checkNum: [],
           inputCheck:"",
           user:{
               userName: "",
               password: "",
               rememberMe: false
           }
       },
       methods:{
           draw:function (checkNum) {
               var canvas_width=$('#canvas').width();
               var canvas_height=$('#canvas').height();
               var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
               var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
               canvas.width = canvas_width;
               canvas.height = canvas_height;
               var aCode = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
               // var aCode = sCode.split(",");
               var aLength = aCode.length;//获取到数组的长度

               for (var i = 0; i <= 3; i++) {
                   var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
                   var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                   var txt = aCode[j];//得到随机的一个内容
                   checkNum[i] = txt.toLowerCase();
                   var x = 10 + i * 20;//文字在canvas上的x坐标
                   var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
                   context.font = "bold 23px 微软雅黑";

                   context.translate(x, y);
                   context.rotate(deg);

                   context.fillStyle = this.randomColor();
                   context.fillText(txt, 0, 0);

                   context.rotate(-deg);
                   context.translate(-x, -y);
               }
               for (var i = 0; i <= 5; i++) { //验证码上显示线条
                   context.strokeStyle = this.randomColor();
                   context.beginPath();
                   context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                   context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                   context.stroke();
               }
               for (var i = 0; i <= 30; i++) { //验证码上显示小点
                   context.strokeStyle = this.randomColor();
                   context.beginPath();
                   var x = Math.random() * canvas_width;
                   var y = Math.random() * canvas_height;
                   context.moveTo(x, y);
                   context.lineTo(x + 1, y + 1);
                   context.stroke();
               }
           },
           randomColor: function () {
             var r = Math.floor(Math.random() * 256);
             var g = Math.floor(Math.random() * 256);
             var b = Math.floor(Math.random() * 256);
             return "rgb(" + r + "," + g + "," + b + ")";
           },
           login:function () {
             var self=this;
              /*if (this.inputCheck==""){
                layer.msg("请输入验证码",{icon: 0});
                this.draw(this.checkNum);
                return ;
              }else if (this.inputCheck.toLowerCase() !=this.checkNum.join("").toLowerCase()){
                layer.msg("输入的验证码为错",{icon: 0});
                this.draw(this.checkNum);
                return ;
              }*/
              $.ajax({
                url:"/api/login",
                type:"post",
                contentType:"application/json",
                data:JSON.stringify(self.user),
                success:function (result) {
                  if (result.status==200){
                    window.location.href="common/dashboard";
                  }else{
                    layer.msg(result.message,{icon:0});
                    self.draw(self.checkNum);
                  }
                },
                error:function (result) {
                  layer.msg(result.responseText,{icon:0});
                  self.draw(self.checkNum);
                }
              });
           },
         key:function (event) {
           if (event.keyCode==13){
              this.login();
           }
         }
       },
      created:function(){
         window.key=this.key;
      },
      mounted:function () {
        this.draw(this.checkNum);
      }
    });
 </script>